<template>
    <view class="dataLibrary">
        <image :src="animationUrl" class="animationBg" v-if="isClick"></image>
        <scroll-view class="chapterList" scroll-x="true">
            <view v-for="(item, index) in dataLibraryImgList" :key="index" class="chapterCont"
                @click="toChapterDetails(item)">
                <image :src="item.avatarUrl" class="bg"></image>
            </view>
        </scroll-view>
        <view class="goBack" @click="goBack">返回</view>
    </view>
</template>

<script>
export default {
    data() {
        return {
            dataLibraryImgList: [
                {
                    url: 'https://cdn.yinhehh.cn/static/img/game/header_bg1_hover.png',
                    id: 1
                },
                {
                    url: 'https://cdn.yinhehh.cn/static/img/game/header_bg2_hover.png',
                    id: 2
                },
                {
                    url: 'https://cdn.yinhehh.cn/static/img/game/header_bg3_hover.png',
                    id: 3
                },
                {
                    url: 'https://cdn.yinhehh.cn/static/img/game/header_bg4_hover.png',
                    id: 4
                },
                {
                    url: 'https://cdn.yinhehh.cn/static/img/game/header_bg5_hover.png',
                    id: 5
                },
                {
                    url: 'https://cdn.yinhehh.cn/static/img/game/header_bg6_hover.png',
                    id: 6
                }
            ],
            isClick: false,
            animationUrl: null
        }
    },
    methods: {
        goBack() {
            uni.navigateBack()
        },
        toChapterDetails(item) {
            this.isClick = true
            this.animationUrl = item.avatarUrl
            setTimeout(() => {
                this.isClick = false
                const itemStr = encodeURIComponent(JSON.stringify(item)); // 对象转为字符串并编码
                uni.navigateTo({
                    url: '/pages/client/games/dataLibraryDetails?id=' + itemStr
                });
            }, 2000)
        },
        getmCharacterInfo() {
            uni.request({
                url: this.configs.gameUrl + '/play/mCharacterInfo/queryList',
                method: 'GET',
                header: {
                    'X-Access-Token': this.configs.userToken // 在header中添加token
                },
                data: {
                    type: 'lead',
                    userId: this.configs.userId
                },
                success: data => {
                    console.log(data.data.result.records)
                    //this.dataLibraryImgList = data.data.result.records，并且在dataLibraryImgList中添加一个url字段
                    this.dataLibraryImgList = data.data.result
                    console.log(this.dataLibraryImgList)

                },
                fail: (data, code) => { }
            });
        },
    },
    onShow() {
        this.getmCharacterInfo()
    }
}
</script>
<style scoped lang="less">
.dataLibrary {
    width: 100%;
    height: 100vh;
    //背景从上到下粉色渐变黄色
    background: linear-gradient(to bottom, #F8879C, #ecde8fe9);
    position: relative;

    .hide {
        display: none;
    }

    .animationBg {
        position: absolute;
        width: 200rpx;
        height: 200rpx;
        left: 50%;
        top: 50%;
        margin-left: -100rpx;
        margin-top: -100rpx;
        z-index: 10;
        //放大、同时变淡动画，只执行一次
        animation: scale 2s linear 0s 1 forwards;
    }

    @keyframes scale {
        0% {
            transform: scale(1);
            opacity: 1;
        }

        100% {
            transform: scale(2);
            opacity: 0;
        }
    }

    .goBack {
        position: absolute;
        top: 10rpx;
        right: 10rpx;
        width: 100rpx;
        height: 24rpx;
        //粉色背景
        background: #F8879C;
        border-radius: 12rpx;
        text-align: center;
        line-height: 24rpx;
        color: #fff;
        font-size: 14rpx;
    }

    .chapterList {
        white-space: nowrap;
        width: 100%;
    }

    .chapterCont {
        display: inline-block;
        width: 200rpx;
        height: 200rpx;
        margin-top: 50rpx;
        position: relative;
        margin-right: 20rpx;

        .bg {
            position: absolute;
            width: 100%;
            height: 100%;
            left: 0;
            top: 0;
            z-index: 3;
        }

    }

}
</style>